

import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from 'antd';

//请求
import { showHospitalDetailRequest } from '@/api/hospital/hospitalListSet'

import type { hospitalDetailReturnType } from '@/api/hospital/model/hospitalListTypes'

import { useNavigate, useParams } from "react-router-dom";

export default function HospitalShow() {

  //回转路由
  const navigate = useNavigate()

  //拿到对应需要跳转路由的id
  const { id } = useParams()

  //保存数据状态
  const [detailData, setDetailData] = useState<hospitalDetailReturnType>()

  //初始化时发送请求
  useEffect(() => {
    (async () => {
      const result = await showHospitalDetailRequest(id as string)
      //把拿到的数据设置给state
      setDetailData(result)
      // console.log(result);
    })()
  }, [])


  return <div>
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">{detailData?.hospital?.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院logo">{
          detailData?.hospital?.logoData ?
            (<img width={100}
              src={`data:image/jpeg;base64,${detailData?.hospital?.logoData}`}
              alt="" />)
            : ("")
        }</Descriptions.Item>
        <Descriptions.Item label="医院编码">{detailData?.hospital?.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址">{detailData?.hospital?.address}</Descriptions.Item>
        <Descriptions.Item label="医院坐车路线" span={2}>
          {detailData?.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {detailData?.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: "30px" }}
      >
        <Descriptions.Item label="预约周期">{detailData?.bookingRule.cycle}</Descriptions.Item>
        <Descriptions.Item label="放号时间">{detailData?.bookingRule.releaseTime}</Descriptions.Item>
        <Descriptions.Item label="停挂时间">{detailData?.bookingRule.stopTime}</Descriptions.Item>
        <Descriptions.Item label="退号时间">{detailData?.bookingRule.quitTime}</Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {detailData?.bookingRule.rule}
        </Descriptions.Item>
      </Descriptions>

      <Button
        onClick={() => {
          navigate(-1)
        }}
        style={{ marginTop: "30px" }}>返回</Button>
    </Card>
    
  </div>;

}
